<template>
    <div class="equipmentList">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">设备列表</span>
        </div>
        <div class="status">
            <!-- 设备状态：全部   运行(23)   离线(23)   故障(23)   报警(23) -->
            <span class="status_left">设备状态：</span>
            <div class="status_right">
                <span class="status_item" :class="{ 'status_active': statusIndex == 0 }">全部</span>
                <span class="status_item" :class="{ 'status_active': statusIndex == 1 }">运行(23)</span>
                <span class="status_item" :class="{ 'status_active': statusIndex == 2 }">离线(23)</span>
                <span class="status_item" :class="{ 'status_active': statusIndex == 3 }">故障(23)</span>
                <span class="status_item" :class="{ 'status_active': statusIndex == 4 }">报警(23)</span>
            </div>
        </div>
        <div class="search">
            <el-input v-model="searchData" placeholder="请输入设备名称/设备标号查询" clearable />
            <span class="btn">搜索</span>
        </div>
        <div class="list">
            <div class="list_item" v-for="item in equipmentList.list">
                <div class="list_status" :class="{'status_off':item.status==1,'status_malfunction':item.status==2,'status_stop':item.status==1}"></div>
                <span>
                    <span>{{ item.type }}</span>-<span>{{ item.name }}</span><span>（{{ item.num }}）</span>
                </span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

let statusIndex = ref(0);//选中的状态

let searchData = ref("");//搜索数据

//设备类别
let equipmentList = reactive({
    list: [
        { status: 0, type: "#1焚烧炉", name: "#1工业水泵", num: 'FSL-SB-100001' },
        { status: 1, type: "#1焚烧炉", name: "#1工业水泵", num: 'FSL-SB-100001' },
        { status: 2, type: "#1焚烧炉", name: "#1工业水泵", num: 'FSL-SB-100001' },
        { status: 3, type: "#1焚烧炉", name: "#1工业水泵", num: 'FSL-SB-100001' },
        { status: 0, type: "#1焚烧炉", name: "#1工业水泵", num: 'FSL-SB-100001' },
        { status: 0, type: "#1焚烧炉", name: "#1工业水泵", num: 'FSL-SB-100001' },
        { status: 0, type: "#1焚烧炉", name: "#1工业水泵", num: 'FSL-SB-100001' },
        { status: 0, type: "#1焚烧炉", name: "#1工业水泵", num: 'FSL-SB-100001' },
        { status: 0, type: "#1焚烧炉", name: "#1工业水泵", num: 'FSL-SB-100001' },
    ]
})
</script>

<style lang="scss" scoped>
.equipmentList {
    position: absolute;
    width: vh(421);
    height: vh(302);
    right: vh(21);
    bottom: vh(60);
    background: url(@/assets/images/home/left2.png) no-repeat;
    background-size: 100% 100%;
    z-index: 999;
    // padding-left: vh(19);
    padding-right: vh(4);

    .status {
        display: flex;
        align-items: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: vh(12);
        color: #FFFFFF;
        margin-top: vh(15);
        padding-right: vh(10);
        padding-left: vh(19);
        .status_right {
            margin-left: vh(5);

            .status_item {
                margin-right: vh(10);
                cursor: pointer;

                &.status_active {
                    color: #00D2FF;
                }
            }
        }
    }

    .search {
        display: flex;
        align-items: center;
        margin-top: vh(10);
        padding-right: vh(10);
        padding-left: vh(19);
        .el-input {
            width: vh(179);
            height: vh(22);
            margin-right: vh(12);

            :deep(.el-input__wrapper) {
                background-color: rgba(11, 122, 155, 0.5);
                box-shadow: none;
                border: vh(1) solid #00BDE5;
                border-radius: vh(3);

                .el-input__inner {
                    color: #fff;
                    font-size: vh(11);
                    line-height: vh(22);
                    height: vh(22);
                }
            }
        }

        .btn {
            width: vh(48);
            height: vh(22);
            display: inline-block;
            line-height: vh(22);
            border-radius: vh(3);
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: vh(12);
            color: #FFFFFF;
            text-align: center;
            background: #0B7A9B;
            cursor: pointer;
        }
    }

    .list {
        padding-right: vh(10);
        height: vh(200);
        overflow-y: scroll;
        margin-top: vh(10);
        padding-left: vh(19);
        .list_item {
            display: flex;
            align-items: center;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 12px;
            color: #FFFFFF;
            padding-top: vh(13);
            padding-bottom: vh(11);
            // border-bottom: 1px dashed #2A93B8;
            border-bottom: 1px dashed rgba(42,147,184,0.5);
            &:first-child{
                padding-top: vh(3);
            }
            .list_status {
                width: vh(8);
                height: vh(8);
                background: #FFC000;
                border-radius: 50%;
                margin-right: vh(4);
                &.status_off {
                    background: #638895;
                }
                &.status_malfunction {
                    background: #FF3232;
                }
                &.status_stop {
                    background: #00FFA8;
                }
            }
        }
    }
}
</style>
